<template>
	<view class="content">
		<!-- 頭部 -->
		<view class="header">
			<image class="headerBg" src="../static/swiper.png" mode=""></image>
			<view class="blackBg"></view>
			<view class="headerText flexleft">
				<image class="textBg margin_right2" src="/static/goods.png" mode=""></image>
				<view class="justify_between_column" style="height: 228rpx;">
					<view class="text_j color_fff">八角笼中</view>
					<view class="text_five color_fff">導演：王宝强</view>
					<view class="text_five color_fff">類型：剧情</view>
					<view class="text_five color_fff">時間：146分钟</view>
					<view class="text_five color_fff">主演：王宝强,王迅</view>
				</view>
			</view>
		</view>
		<!-- 電影片信息 -->
		<view class="mainpadding ffffff flexbetween">
			<view class="flex1 margin_right3">
				<view class="text_w color_ling">万达影城（中原万达IMAX店）</view>
				<view class="text_b color_jiu margin_top">中原區中原中路171號万达广场5-6层</view>
			</view>
			<view class="flexleft">
				<view class="margin_right4">
					<image class="imgBox" src="/static/images/index/navigation.png" mode=""></image>
					<view class="text_pee color_san">導航</view>
				</view>
				<view>
					<image class="imgBox" src="/static/images/index/phoneShop.png" mode=""></image>
					<view class="text_pee color_san">電話</view>
				</view>
			</view>
		</view>
		<!-- 預約時間 -->
		<view class="mainpadding margin_top ffffff">
			<scroll-view class="white_nowrap" scroll-x>
				<view class="flexleft">
					<view class="margin_right3" v-for="(item,index) in 8">
						<view :class="index==0?'select':'noSelect'">
							<view :class="index==0?'text_pee color_orange':'text_pee color_jiu'">明天</view>
							<view :class="index==0?'text_a color_orange margin_top1':'text_a color_san margin_top1'">
								7-15</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 電影票列表 -->
		<view class="mainpadding">
			<view class="mainpadding ffffff border2 flexbetween margin_bottom3" v-for="item in 4">
				<view class="flexleft">
					<view class="margin_right3">
						<view class="text_d color_ling">10:05</view>
						<view class="text_pee color_jiu margin_top1">12:49散场</view>
					</view>
					<view>
						<view class="text_five color_ling">2D原版</view>
						<view class="text_pee color_jiu" style="margin-top: 18rpx;">10號厅</view>
					</view>
				</view>
				<view class="flexleft">
					<view class="margin_right3">
						<view class="text_w color_orange">$23.00</view>
						<view class="text_pee color_jiu margin_top1">餘：56</view>
					</view>
					<view class="btn" @click="goTicketInfoSeat">購票</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			goTicketInfoSeat(){ //購票
				uni.navigateTo({
					url:"./ticketInfoSeat?type=0"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 頭部
	.header {
		height: 304rpx;
		position: relative;

		.headerBg {
			width: 100%;
			height: 100%;
			-webkit-filter: blur(10rpx);
			filter: blur(10rpx);
			// opacity: 0.1;
		}

		.blackBg {
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, .2);
			position: absolute;
			left: 0;
			top: 0;
			z-index: 90;
		}

		.headerText {
			width: 100%;
			padding: 30rpx 50rpx;
			box-sizing: border-box;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 99;
		}

		.textBg {
			width: 164rpx;
			height: 228rpx;
			border-radius: 6rpx 6rpx 6rpx 6rpx;
		}
	}

	// 電影片信息
	.imgBox {
		width: 52rpx;
		height: 52rpx;
	}

	// 預約時間
	.noSelect {
		width: 130rpx;
		height: 106rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid #E8E8E8;
	}

	.select {
		width: 130rpx;
		height: 106rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: rgba(255, 92, 0, 0.1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid #FF5C00;
		color: #FF5C00 !important;
	}

	.btn {
		width: 107rpx;
		height: 57rpx;
		line-height: 57rpx;
		text-align: center;
		background: #FFB800;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}
</style>